<!DOCTYPE html>
<html lang="en">
<head>
<title>SunivoWeb | DateTime Picker</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="author" content="Huazz Tsai">
<meta name="keyword" content="">
<link rel="shortcut icon" href="../customize/ico/favicon.png">
<link rel="apple-touch-icon" href="../customize/ico/favicon.png">
<!--[if lt IE 9]>
<script type="text/javascript" src="../script/html5shiv.js"></script>
<![endif]-->
<link rel="stylesheet" href="../customize/css/sunivoweb.frame.css"/>
<link rel="stylesheet" href="../customize/css/reset.css"/>
<link rel="stylesheet" href="../customize/css/sunivoweb_style.css"/>
<link rel="stylesheet" href="../customize/css/k-plugin.css"/>
<script type="text/javascript" src="../thirdparty/script/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../customize/script/sunivoweb.frame.js"></script>
<script type="text/javascript" src="../customize/script/sunivoweb.app.js"></script>
<script type="text/javascript" src="../customize/script/ports.js"></script>
<script type="text/javascript" src="../customize/script/portSelector.js"></script>
<script>(function($){$.initover = function(fn) {$(document).one('initover', fn);}})(jQuery);</script>
<script type="text/javascript" src="../customize/script/handlebars.js"></script>
</head>
<body>
<div class="k-ichcek">
  <h1>DateTime Picker </h1>
  <!--插件编译人、编译时间-->
  <label>王玉兴　发布日期：2014-03-27</label>
  <div class="component-block">
    <h2>★ 案例</h2>
    Bootstrap日期时间选择器（Bootstrap DateTime Picker）是一个Bootstrap组件，能够简化页面上日期、时间的输入。 
</div>
  <h3>静态案例</h3> 
<div class="bs-docs-example"> 
    <!--添加插件案例-->
  <div class="form-horizontal"> 
        <div class="control-group">
            <label class="control-label" for="form_datepicker">只选择日期</label>
            <div class="controls">
            <input class="date-picker" type="text" data-startdate="2000-01-01" data-format="yyyy-mm" data-enddate="2014-12-31" value="2000-01"/>
            </div>
            <div class="controls">
            <input class="date-picker" type="text" data-startdate="1990-01-01" data-format="yyyy-mm" data-enddate="2014-12-31" value="2000-01"/>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="form_timepicker">只选择时间</label>
            <div class="controls">
                <input class="time-picker" id="form_timepicker" type="text" />
            </div>
        </div>
        <div class="control-group">
          <label class="control-label" for="form_datetimepicker">选择日期时间</label>
            <div class="controls">
              <input class="datetime-picker" id="form_datetimepicker" type="text" data-startdate="2000-01-01" data-format="yyyy-mm-dd hh:ii" data-enddate="2014-12-31"/>
            </div>
        </div>
    </div>
    
    
  </div>
  <!--添加插件代码-->
  <pre class="prettyprint linenums"><ol class="linenums"><li>&lt;input <span class="text-success">class=</span><span class="text-warning">&quot;date-picker&quot;</span> type=&quot;text&quot; <span class="text-success">data-startdate=</span><span class="text-warning">&quot;2000-01-01&quot;</span> <span class="text-success">data-format=</span><span class="text-warning">&quot;mm-dd&quot;</span> <span class="text-success">data-enddate=</span><span class="text-warning">&quot;2014-12-31&quot;</span>/&gt;</li><li>/*</li><li> 说明：</li><li> data-startdate属性设置起始时间(默认为当前时间)</li><li> data-enddate属性设置结束时间(默认无穷大)</li><li> data-format属性设置时间格式(默认为yyyy-mm-dd)</li><li>*/</li><li>&lt;input <span class="text-success">class=</span><span class="text-warning">&quot;time-picker&quot; </span>type=&quot;text&quot; /&gt;</li><li>&lt;input <span class="text-success">class=</span><span class="text-warning">&quot;datetime-picker&quot;</span> type=&quot;text&quot; <span class="text-success">data-startdate=</span><span class="text-warning">&quot;2000-01-01&quot;</span> <span class="text-success">data-format=</span><span class="text-warning">&quot;mm-dd&quot;</span> <span class="text-success">data-enddate=</span><span class="text-warning">&quot;2014-12-31&quot;</span>/&gt;</li><li>/*</li><li> 说明：</li><li> 只要在原有的输入框上添加date-picker(日期选择)/time-picker(时间选择)/datetime-picker(日期时间)样式</li><li> 在页面底部调用app.init()即可完成效果初始化</li><li>*/</li></pre>
</div>
</body>
<script type="text/javascript">
$.initover(function(){})
$(function() {
	app.init();
});
</script>
</html>